<template>
	<view class="form_class">
		<!-- 处方图片 -->
		<RxUonPreview :src="rx_info.canvas.tempImagePath">
			<view class="preview_class">
				<uv-text text="处方单" :custom-style="{'padding-left':'30rpx'}"></uv-text>: 
				<view class="preview_class_right">
					<uv-icon name="eye" size="28"></uv-icon>
				</view>
			</view>
		</RxUonPreview>
		
		<view class="visits_title_class">
			<view class="visits_title_info_class">复诊</view>
		</view>
		
		<!-- 复诊 -->
		<uv-datetime-picker ref="datetimePicker" v-model="valueDate" mode="datetime" confirmColor="#2c9c3c" :minDate="valueDate" :formatter="formatter"  @confirm="confirmDate"></uv-datetime-picker>
		
		<uv-swipe-action ref="closeOtherRef">
			<view v-for="item, index in visits_date" :key="index">
				<uv-swipe-action-item :options="options" :disabled="!item.date" @click="optionsClick(name, index)">
					<view class="swipe-action uv-border-top uv-border-bottom">
						<view class="swipe-action__content">
							<view class="visits_class">
								<text class="swipe-action__content__text">第{{ index + 1 }}次复诊</text>
								<view style="text-align: right;">
									<uv-text :text="item.date?item.date:'请选择时间'" :suffixIcon="item.date?'arrow-left':'arrow-right'" type="info" @click="!item.date? dateClick(index): ''"></uv-text>
								</view>
							</view>
						</view>
					</view>
				</uv-swipe-action-item>
				<view><uv-line></uv-line></view>
			</view>	
		</uv-swipe-action>
		
		<view class="visits_title_class">
			<view class="visits_title_info_class">注意事项</view>
		</view>
		<view class="visits_title_class_textarea">
			<uv-textarea v-model="visits_note" border="bottom" :autoHeight="true" placeholder="复诊有注意事项时请输入内容."></uv-textarea>
		</view>
		
		<view class="form_submit_class">
			<uv-row>
				<uv-col span="6">
					<view style="width: 70%;margin-left: auto;margin-right: auto;">
						<uv-button :hairline="false" text="上一步" customTextStyle="color: #2c9c3c;font-size: 28rpx" @click="backClick"></uv-button>
					</view>
				</uv-col>
				<uv-col span="6">
					<view style="width: 70%;margin-left: auto;margin-right: auto;">
						<uv-button :hairline="false" text="结束" color="#2c9c3c" customTextStyle="color: #ffffff;font-size: 28rpx" @click="nextClick"></uv-button>
					</view>
				</uv-col>
			</uv-row>
		</view>
		
		<view class="visits_info_class">须知
			<view class="visits_info_class_context">1、患者及复诊电手扫描诊所二维码关注公众号后可接收患者的复诊通知;</view>
			<view class="visits_info_class_context">2、除公众号通知外，还有短信通知以及复诊电手的人为电话通知;</view>
		</view>
		
		<uv-modal ref="cisitsModal" content='确定提交吗？' align="center" :showCancelButton="true" confirmColor="#2c9c3c" @confirm="confimSubmit"></uv-modal>
	</view>
</template>

<script>
	import RxUonPreview from '@/components/RxUonPreview/RxUonPreview.vue'
	export default {
		name:"visit",
		components: {
			RxUonPreview
		},
		data() {
			return {
				rx_info: {},
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				visits_date: [{
					date: ''
				}],
				visits_note: '',
				valueDate: Number(new Date()),
				dateIndex: ''
			};
		},
		created() {
			const rx_data = this.$store.state.rx		// 缓获取存数据
			if (rx_data.hasOwnProperty('_id')) {  // _id 属性存在
				this.rx_info = rx_data
				this.visits_date = this.rx_info.visits.date
				this.visits_note = this.rx_info.visits.note
				if (this.visits_date.length === 0) {
					this.visits_date.push({date: ''})
				} else {
					if ( this.visits_date[this.visits_date.length - 1].date !== '') {
						this.visits_date.push({date: ''})
					}
				}
				
			} else {
				this.rx_info = rx_data		// 缓获取存数据
				try {
					this.visits_date = rx_data.visits.date
				} catch {}
				try {
					this.visits_note = rx_data.visits.note
				} catch {}
				
			}
		},
		methods: {
			backClick() {
				this.$emit("visitBack", )
				this.rx_info.visits = {
					date: this.visits_date,
					note: this.visits_note
				}
				this.$store.dispatch('set_rx', this.rx_info)
			},
			nextClick() {
				this.$refs.cisitsModal.open()
			},
			confimSubmit() {
				this.visits_date.pop()
				this.rx_info.visits = {
					date: this.visits_date,
					note: this.visits_note
				}
				this.rx_info.slipCreateTime = this.formatDate(Number(new Date())) // 问诊时间
				this.$emit("visitNext", this.rx_info)
			},
			optionsClick(name, index) {
				if (this.visits_date.length > 1) {	// 最后一个不删除
					this.visits_date.splice(index, 1)
					this.$refs.closeOtherRef.closeOther()
				}
			},
			dateClick(index) {
				this.dateIndex = index
				this.$refs.datetimePicker.open()
			},
			// 格式化日期时间
			formatDate(timestamp) {  
			    const date = new Date(timestamp);  
			    const year = date.getFullYear();  
			    const month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的，所以要加1  
			    const day = ('0' + date.getDate()).slice(-2);  
			    const hours = ('0' + date.getHours()).slice(-2);  
			    const minutes = ('0' + date.getMinutes()).slice(-2);  
			    return `${year}-${month}-${day} ${hours}:${minutes}`;  
			},
			confirmDate(e) {
				this.visits_date[this.dateIndex].date = this.formatDate(e.value)
				this.visits_date.push({date: ''})
			},
			// 格式化日期
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			}
		}
	}
</script>

<style lang="scss">
	.form_class {
		// width: 95%;
		margin-top: 5%;
		margin-left: auto; /* 左侧外边距自动调整为最大值 */
		margin-right: auto;/* 右侧外边距自动调整为最大值 */
		
		.preview_class {
			padding: 0rpx 30rpx 0rpx 0rpx;
			display: flex;	// 使用 flex 布局
			justify-content: space-between;	// 左右两个视图分散排列
			width: 365%;
			margin-bottom: 30rpx;
			
			.preview_class_right {
				text-align: right;
			}
		}
		
		.visits_title_class {
			padding: 0rpx 30rpx 0rpx 30rpx;
			background-color: #e1efe4;
			padding: 30rpx;
			
			.visits_title_info_class {
				color: #2c9c3c;
				font-size: 18px;
				font-weight: bold;
			}
		}
		.visits_title_class_textarea {
			padding: 0rpx 10rpx 0rpx 10rpx;
		}
		
		.visits_class {
			padding: 0rpx 30rpx 0rpx 0rpx;
			display: flex;	// 使用 flex 布局
			justify-content: space-between;	// 左右两个视图分散排列
			margin-bottom: 20rpx;
		}
		
		.form_submit_class {
			margin-top: 20%;
			margin-left: auto; /* 左侧外边距自动调整为最大值 */
			margin-right: auto;/* 右侧外边距自动调整为最大值 */
		}
		
		.visits_info_class {
			padding: 0rpx 30rpx 0rpx 30rpx;
			margin: 20% 0rpx 10rpx 0rpx;
			font-weight: bold;
			font-size: 18px;
			// color: rgba(0, 0, 0, 0.4);
			
			.visits_info_class_context {
				margin-top: 10rpx;
				margin-bottom: 20rpx;
				font-weight: normal;
				font-size: 16px;
			}
			
		}
	}
	
	.uv-page {
		padding: 0;
	}
	.uv-demo-block__title {
		padding: 10px 0 2px 15px;
	}
	.swipe-action {
		&__content {
			padding: 25rpx 0;
			&__text {
				font-size: 15px;
				color: #222;
				padding-left: 30rpx;
			}
		}
	}

</style>